<template>
  <Dialog :visible="transferVisible" :title="$t('调单')" width="80%" :footer="false" @close="close">
    <el-form label-width="80px" :model="transferPage" ref="transferSearch">
      <el-row :gutter="24">
        <el-col :span="6" :xs="24" v-show="$permiss[333]">
          <el-form-item :label="$t('客群名称')" prop="guestGroupId" :rules="[
                {required: true, message: this.$t('请选择客群名称'), trigger: 'select'}
          ]">
            <el-select v-model="transferPage.guestGroupId" style="width: 100%"
            >
              <el-option v-for="item in guestGroupList" :key="item.guestGroupId" :label="item.guestGroupName"
                         :value="item.guestGroupId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" :xs="24">
          <el-form-item :label="$t('APP名称')" prop="productName" :rules="[
                {required: true, message: this.$t('请选择APP'), trigger: 'select'}
          ]">
            <el-select :placeholder="$t('请选择APP')" @change="productChange" style="width: 100%"
                       v-model="transferPage.productName">
              <el-option v-for="item in productList" :key="item.productId"
                         :label="item.appName"
                         :value="item.productName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-show="$permiss[970]">
          <el-form-item prop="adminUserId" :label="$t('经理名称')">
            <el-select :placeholder="$t('请选择经理')" @change="managerSelect" style="width: 100%"
                       v-model="transferPage.managerId" clearable>
              <el-option v-for="item in managerList" :key="item.adminUserId" :label="item.adminName"
                         :value="item.adminUserId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-show="$permiss[331]">
          <el-form-item prop="adminUserId" :label="$t('催收员')">
            <el-select :placeholder="$t('请选择催收员')" style="width: 100%" filterable clearable
                       v-model="transferPage.adminUserId">
              <el-option v-for="item in collectionUser" :key="item.adminUserId" :label="item.adminName"
                         :value="item.adminUserId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" :xs="24">
          <el-form-item :label="$t('订单编号')" prop="recordId">
            <el-input v-model="transferPage.recordId"/>
          </el-form-item>
        </el-col>
        <el-col :span="6" :xs="24">
          <el-form-item :label="$t('用户姓名')" prop="userName">
            <el-input v-model="transferPage.userName"/>
          </el-form-item>
        </el-col>
        <el-col :span="6" :xs="24">
          <el-form-item :label="$t('手机号码')" prop="userPhone">
            <el-input v-model="transferPage.userPhone"/>
          </el-form-item>
        </el-col>
        <el-col :span="8" :xs="24">
          <el-form-item :label="$t('逾期天数')" prop="overdueDay">
            <el-col :span="24">
              <el-col :span="11">
                <el-input v-model="transferPage.overdueDayStart" style="width: 100%;"></el-input>
              </el-col>
              <el-col :span="1" style="line-height: 32px">-</el-col>
              <el-col :span="11">
                <el-input v-model="transferPage.overdueDayEnd" style="width: 100%;"></el-input>
              </el-col>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="4" :xs="24" style="text-align: right">
          <el-button type="primary" @click="getTransferTable">{{ $t('查询') }}</el-button>
          <el-button @click="resetTransferForm">{{ $t('重置') }}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div style="margin: 10px 0;text-align: right">
      <el-button type="primary" @click="selectDistribution" v-show="$permiss[335]">{{ $t('所选分配') }}</el-button>
      <el-button type="primary" @click="searchDistribution" v-show="$permiss[334]">{{ $t('所搜分配') }}</el-button>
    </div>
    <Table :table-data="transferTable" :table-column="transferTableColumn" :page="transferPage"
           :loading="loading"
           :selection="true"
           @handleSelectionChange="transferSelectChange"
           :select-rows="transferSelectRows"
           @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
    ></Table>

    <!--     选择分配人员弹窗-->
    <Dialog :visible="distribution.isShow" :title="distribution.title" :append-body="true"
            @close="clearDistributionSearch(),distribution.isShow = false" width="50%"
            @cancel="distribution.isShow = false"
            @confirm="distributionSubmit()"
    >
      <el-form label-width="80px" :model="distributionPage" ref="distributionSearch">
        <el-row :gutter="24">
          <el-col :span="8" :xs="24">
            <el-form-item :label="$t('姓名')" prop="adminName">
              <el-input v-model="distributionPage.adminName"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item :label="$t('账号')" prop="accountNumber">
              <el-input v-model="distributionPage.accountNumber"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24" style="text-align: right">
            <el-button type="primary" @click="getDistributionList">{{ $t('查询') }}</el-button>
            <el-button @click="resetDistributionForm">{{ $t('重置') }}</el-button>
          </el-col>
        </el-row>
      </el-form>
      <Table :table-data="distributionTable" :table-column="distributionColumn" :page="false" :selection="true"
             :select-rows="distributionSelectRows" @handleSelectionChange="distributionSelectChange"/>
    </Dialog>
  </Dialog>
</template>

<script>
import {selectManager} from "@/api/system";
import {
  collectionTransferList,
  selectCollectionTransfer,
  searchCollectionTransfer,
  guestBindList,
  guestGroupBindList
} from '@/api/postLoan'

export default {
  props: {
    transferVisible: {},
    guestGroupList: {},
    productList: {},
  },
  data() {
    return {
      transferPage: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      transferTable: [],
      collectionUser: [],
      transferTableColumn: [
        {label: this.$t('订单编号'), prop: 'recordId', align: 'center', minWidth: 150},
        {label: this.$t('客群名称'), prop: 'guestGroupName', align: 'center'},
        {label: this.$t('用户姓名'), prop: 'userName', align: 'center'},
        {label: this.$t('手机号码'), prop: 'userPhone', align: 'center'},
        {label: this.$t('应还时间'), prop: 'refundDate', align: 'center', minWidth: 150},
        {label: this.$t('逾期天数'), prop: 'overdueDay', align: 'center',},
        {label: this.$t('剩余应还金额'), prop: 'surplusRefundAmount', align: 'center', minWidth: 150},
        {label: this.$t('APP名称'), prop: 'appName', align: 'center'},
        {label: this.$t('催收员'), prop: 'adminUserName', align: 'center'},
      ],
      transferSelectRows: [],
      distribution: {
        isShow: false,
        title: '',
        type: ''
      },
      distributionTable: [],
      distributionColumn: [
        {label: this.$t('姓名'), prop: 'adminName', align: 'center'},
        {label: this.$t('账号'), prop: 'accountNumber', align: 'center'},
      ],
      distributionPage: {},
      productName: null,
      distributionSelectRows: [],
      managerList: [],
      loading: false
    }
  },
  methods: {
    async getTransferTable() {
      this.$refs.transferSearch.validate(async v => {
        if (v) {
          const params = {
            ...this.transferPage,
            productId: this.productList.filter(item => item.productName === this.transferPage.productName)[0].productId,
            overdueDayStart: this.transferPage.overdueDayStart ? parseInt(this.transferPage.overdueDayStart) : null,
            overdueDayEnd: this.transferPage.overdueDayEnd ? parseInt(this.transferPage.overdueDayEnd) : null
          }
          this.loading = true
          const res = await collectionTransferList({...params, isAgency: 2})
          if (res.code === 1) {
            const {list, total,} = res.data
            this.loading = false
            this.transferTable = list
            this.transferPage = Object.assign({}, this.transferPage, {
              total: total
            })
          }
        }
      })
    },
    handleSizeChange(val) {
      this.transferPage.pageSize = val
      this.getTransferTable()
    },
    handleCurrentChange(val) {
      this.transferPage.pageNum = val
      this.getTransferTable()
    },
    // 产品下拉回调
    async productChange(value) {
      this.productName = value
      // 没有经理权限 调用催收员下拉
      if (!this.$permiss[970]) {
        this.collectionUser = await guestGroupBindList({
          productName: value,
          guestGroupId: this.transferPage.guestGroupId,
          adminRole: 7,
          pageSize: 100
        }).then(res => res.data.list)
      } else {
        // 获取经理
        guestGroupBindList({
          productName: value,
          adminRole: 6,
          guestGroupId: this.transferPage.guestGroupId,
          pageSize: 100,
        }).then(res => {
          this.managerList = res.data.list
          this.collectionUser = []
          // 清空上一个选择的值
          this.$set(this.transferPage, "adminUserId", null)
          this.$set(this.transferPage, "managerId", null)
        })
      }
    },
    // 经理下拉
    async managerSelect(value) {
      if (value) {
        this.$set(this.transferPage, "adminUserId", null)
        this.collectionUser = await guestGroupBindList({
          productName: this.productName,
          guestGroupId: this.transferPage.guestGroupId,
          managerId: value,
          pageSize: 100,
          adminRole: 7
        }).then(res => res.data.list)
      } else {
        this.transferPage.managerId = null
        this.transferPage.adminUserId = null
      }
    },
    transferSelectChange(value) {
      this.transferSelectRows = value
    },
    async selectDistribution() {
      if (this.transferSelectRows.length === 0) return this.$message.error(this.$t('请选择要分配的订单'))
      await this.getDistributionList()
      this.distribution = {
        isShow: true,
        type: 'select',
        title: this.$t('所选分配')
      }
    },
    searchDistribution() {
      this.$refs.transferSearch.validate(async v => {
        if (v) {
          await this.getDistributionList()
          this.distribution = {
            isShow: true,
            type: 'search',
            title: this.$t('所搜分配')
          }
        }
      })

    },
    //获取分配列表
    async getDistributionList() {
      this.distributionTable = await guestBindList({
        ...this.distributionPage,
        productName: this.productName,
        guestGroupId: this.transferPage.guestGroupId,
        valid: 1,
        managerId: this.transferPage.managerId
      }).then(res => res.data)
    },
    // 选择提醒员
    distributionSelectChange(value) {
      this.distributionSelectRows = value
    },

    // 分配提交
    async distributionSubmit() {
      if (this.distributionSelectRows.length === 0) return this.$message.error(this.$t('请选择提醒员'))
      let params = {}
      let api
      if (this.distribution.type === 'select') {
        params.adminUserIdList = this.distributionSelectRows
        params.todayExpireIdList = this.transferSelectRows
        api = selectCollectionTransfer(params)
      } else {
        params = {
          ...this.transferPage,
          pageNum: undefined,
          pageSize: undefined,
          total: undefined,
          productId: this.productList.filter(item => item.productName === this.transferPage.productName)[0].productId,
          adminUserIdList: this.distributionSelectRows
        }
        api = searchCollectionTransfer(params)
      }
      const res = await api
      if (res.code === 1) {
        this.$message.success(this.$t('分配成功'))
        this.clearDistributionSearch()
        this.getTransferTable()
        // 通知父组件刷新列表
        this.$emit('confirm')
        this.distributionSelectRows = []
        this.distribution.isShow = false
      }
    },
    // 表单调单重置
    resetTransferForm() {
      this.clearTransferForm()
      this.getTransferTable()
    },
    // 表单调单清空
    clearTransferForm() {
      this.transferPage = {
        pageSize: 10,
        pageNum: 1,
        total: 0
      }
      this.transferTable = []
      this.$refs.transferSearch.resetFields()
    },
    // 表单分配清空
    clearDistributionSearch() {
      this.distributionPage = {}
      this.$refs.distributionSearch.resetFields()
    },
    // 表单分配重置
    resetDistributionForm() {
      this.clearDistributionSearch()
      this.getDistributionList()
    },
    close() {
      this.transferTable = []
      this.clearTransferForm()
      this.$emit('update:transferVisible', false)
    }
  }
}
</script>

<style>

</style>
